<template lang="">
  <div class="page">
    <Nav :leftShow="left_show" :leftName="left_name" :rightName="right_name" :titleName="title_name">
    </Nav>
    <div class="login" @click="clickAction">
      <div class="circle">
        <img src="//elm.cangdu.org/img/default.jpg" alt="" class="head">
      </div>
      <div class="center">
        <h3>
          {{loading}}
        </h3>
        <span>
          暂无绑定手机号
        </span>
      </div>
      <div class="right">
        <i class="iconfont icon-jiantou right1"></i>
      </div>
    </div>
    <div class="zero">
      <div class="zleft" @click="myremain">
        <span class="orange">
          0.00
        </span>
        <span class="yuan">
          元
        </span>
        <span class="remain">
          我的余额
        </span>
      </div>
      <div class="zcenter" @click="myfavourable">
        <span class="orange red">
          3
        </span>
        <span class="yuan ge">
          个
        </span>
        <span class="remain">
          我的优惠
        </span>
      </div>
      <div class="zright" @click="mygrade">
        <span class="orange green">
          0
        </span>
        <span class="yuan fen">
          分
        </span>
        <span class="remain">
          我的积分
        </span>
      </div>
    </div>
    <div class="content">
      <div class="mine order" @click="clickOrder">
        <i class="iconfont icon-wodedingdan"></i>
        <span>我的订单</span>
        <i class="iconfont icon-jiantou right2"></i>
      </div>
      <div class="mine score" @click="clickshop">
        <i class="iconfont icon-jifentixicopy"></i>
        <span>
          积分商城
        </span>
        <i class="iconfont icon-jiantou right2"></i>

      </div>
      <div class="mine card" @click="clickcard">
        <i class="iconfont icon-huangguan"></i>
        <span>
          饿了么会员卡
        </span>
        <i class="iconfont icon-jiantou right2"></i>
      </div>
    </div>
    <div class="content2">
      <div class="mine serve" @click="Myservice">
        <i class="iconfont icon-fuwuzhongxin"></i>
        <span>
          服务中心
        </span>
        <i class="iconfont icon-jiantou right2"></i>
      </div>
      <div class="mine elm">
        <i class="iconfont icon-elemo-waimai-canyin"></i>
        <span>
          下载饿了么
        </span>
        <i class="iconfont icon-jiantou right2"></i>
      </div>
    </div>
    <TabBar :tabBars="tabBars"></TabBar>
  </div>
</template>

<script>
  import Nav from "@/components/Nav.vue";
  import TabBar from "@/components/TabBar.vue";
  export default {
    name: "Loginl",
    data() {
      return {
        left_show: false,
        left_name: '空',
        title_name: '我的',
        right_name: '',
        username: '',
        password: '',
        yzm: '',
        name: "",
        loading: "登录 / 注册",
        tabBars: [
          { className: "icon-changyonglogo40", title: "外卖", path: { name: 'Swiper' } },
          { className: "icon-faxian1", title: "搜索", path: { name: 'About' }, query: { latitude: localStorage.getItem("latitude"), longitude: localStorage.getItem("longitude") } },
          { className: "icon-weibiaoti-", title: "订单", path: { name: 'Menu' } },
          { className: "icon-wode", title: "我的", path: { name: "Mine" } },
        ],
      }
    },
    components: {
      Nav, TabBar
    },
    methods: {
      onSubmit(values) {
        console.log('submit', values);
      },
      clickAction() {
        if (this.loading != "登录 / 注册") {
          this.$router.push({ name: "Accountmessage" })
        } else {
          this.$router.push({ name: 'Login' })
        }
      },
      clickOrder() {
        this.$router.push({ name: 'Menu' })
      },
      myfavourable() {
        this.$router.push({ name: 'Favourable' })
      },
      myremain() {
        this.$router.push({ name: 'Myremain' })
      },
      mygrade() {
        this.$router.push({ name: 'Mygrade' })
      },
      clickcard() {
        // this.$router.push({ name: 'Mycard' })
      },
      Myservice() {
        this.$router.push({ name: "Myservice" })
      },
      clickshop() {
        this.$router.push({ name: "Mygradeshop" })
      }
    },
    created() {
      this.axios.get('https://elm.cangdu.org/v1/user').then((res) => {
        console.log(res)
        if (!res.data.message) {
          this.loading = res.data.username;
          localStorage.setItem("name", res.data.username)
        }
      }).catch((err) => {
        console.log(err);
      });
    },
  }
</script>

<style lang="less" scoped>
  .page {
    background-color: rgb(245, 245, 245);
    margin-top: 40px;
  }

  .login {
    width: 100%;
    height: 100px;
    background-color: rgb(49, 144, 232);
  }

  .circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    float: left;
    background-color: white;
    margin: 15px;
    position: relative;
    background-color: rgb(140, 181, 225);
  }

  .head {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 0px;
    top: 0px;
    border-radius: 50%;
    color: white;
  }

  .center h3 {
    margin-left: 10px;
    color: white;
    padding-top: 20px;
    padding-bottom: 5px;
  }

  .center span {
    font-size: 13px;
    color: white;
    margin-top: 50px;
  }

  .zero {
    display: flex;
  }

  .zleft {
    width: 33%;
    height: 80px;
    border-right: 1px solid gainsboro;
    background-color: white;
    position: relative;
  }

  .yuan {
    position: absolute;
    left: 83px;
    top: 30px;
    font-size: 14px;
  }

  .ge {
    position: absolute;
    left: 70px;
    top: 30px;
  }

  .fen {
    position: absolute;
    left: 70px;
    top: 30px;
  }

  .orange {
    color: rgb(255, 153, 0);
    font-size: 28px;
    font-weight: 600;
    position: absolute;
    left: 30px;
    top: 20px;
    display: inline-block;
  }

  .red {
    position: absolute;
    left: 50px;
    top: 20px;
    color: rgb(255, 95, 62);
  }

  .green {
    position: absolute;
    left: 50px;
    top: 20px;
    color: rgb(106, 194, 11);
  }

  .remain {
    position: absolute;
    left: 35px;
    top: 55px;
    font-size: 12px;
  }

  .zcenter {
    width: 33%;
    height: 80px;
    border-right: 1px solid gainsboro;
    background-color: white;
    position: relative;
  }

  .zright {
    width: 33%;
    height: 80px;
    background-color: white;
    position: relative;
  }

  .content {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .mine {
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: 1px solid gainsboro;
    font-size: 16px;
    line-height: 40px;
    padding-left: 20px;
  }

  .icon-shouji {
    color: white;
  }

  .icon-jifentixicopy {
    color: rgb(252, 123, 83);
  }

  .icon-huangguan {
    color: yellow;
  }

  .icon-fuwuzhongxin {
    color: rgb(74, 165, 240);
  }

  .icon-elemo-waimai-canyin {
    color: rgb(74, 165, 240);
  }

  .right .right1 {
    position: absolute;
    right: 20px;
    top: 70px;
    color: white;
  }

  .right2 {
    position: absolute;
    right: 10px;
    font-size: 12px;

  }
</style>